<template>
   <div class="app-container">
      <box-card>
         <div class="text-center mt-15">
            <userAvatar />
         </div>
         <div class="name-bar">
            <span class="name">{{ state.user.realname }}</span>
            <svg-icon v-if="state.user.sex == 0" icon-class="icon-male" class-name="icon-sex"></svg-icon>
            <svg-icon v-if="state.user.sex == 1" style="color: #AC33C1;" icon-class="icon-female" class-name="icon-sex"></svg-icon>
         </div>
         <ul class="list-group list-group-striped">
            <li class="list-group-item">
               <span class="label">公司</span>
               <div class="pull-right">{{ state.user.companyName }}</div>
            </li>
            <li class="list-group-item">
               <span class="label">部门</span>
               <div class="pull-right">{{ state.user.dept }}</div>
            </li>
            <li class="list-group-item">
               <span class="label">职位</span>
               <div class="pull-right">{{ state.user.job }}</div>
            </li>
            <li class="list-group-item">
               <span class="label">手机</span>
               <div class="pull-right">{{ state.user.mobile }}</div>
            </li>
            <li class="list-group-item">
               <span class="label">最后登录时间</span>
               <div class="pull-right">{{ state.user.lastLoginTime }}</div>
            </li>
         </ul>
      </box-card>
      <box-card class="box-info">
         <template #header>
            <span>基本资料</span>
         </template>
         <el-tabs v-model="activeTab">
            <el-tab-pane label="修改密码" name="resetPwd">
               <resetPwd />
            </el-tab-pane>
            <el-tab-pane label="基本资料" name="userinfo">
               <userInfo :user="state.user" />
            </el-tab-pane>
         </el-tabs>
      </box-card>
   </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar"
import userInfo from "./userInfo"
import resetPwd from "./resetPwd"
import { getInfo } from "@/api/login"

const activeTab = ref("resetPwd")
const state = reactive({
   user: {},
})

function getUser() {
   getInfo().then(response => {
      console.log('response:', response)
      if (response.code === 200) {
         state.user = response.data
      }
   })
};

getUser()
</script>

<style lang="scss" scoped>
.app-container {
   display: flex;
   gap: 24px;
}

.mt-15 {
   margin-top: 15px;
}

.box-card {
   width: 300px;
}

.box-info {
   flex: 1;
}

.list-group {
   margin-top: 30px;
   margin-bottom: 0;
}

.list-group-item {
   color: #323233;
   font-size: 14px;

   .label {
      color: #646566;
   }
}

.list-group-item {
   border: none;
}

.name-bar {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 20px;

   .name {
      color: #323233;
      font-size: 22px;
      font-weight: 500;
   }
}

.icon-sex {
   color: #2A82E4;
   width: 20px;
   height: 20px;
   margin-left: 5px;
}
</style>
